<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Timelines: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'main' %>
  <%= stylesheet_link_tag 'accordion' %>
  <%= javascript_include_tag :defaults %>
 <%= javascript_include_tag 'timeline_js/timeline-api.js?bundle=true' %>
   <%= javascript_include_tag 'scriptaculous' %>
   <%= javascript_include_tag 'accordion' %>
 
  <style type="text/css">
 .default-timeline { width: 400px; height: 250px; }
</style>

 <script>
        var tl;
        function onLoad() {
        var eventSource = new Timeline.DefaultEventSource(0);

            var theme = Timeline.ClassicTheme.create();
            theme.event.bubble.width = 320;
            theme.event.bubble.height = 220;
            var bandInfos = [
                Timeline.createBandInfo({
                    eventSource:    eventSource,
                    width:          "80%",
                    intervalUnit:   Timeline.DateTime.MILLISECOND,
                    intervalPixels: 100
                }),
                Timeline.createBandInfo({
                    eventSource:    eventSource,
                    width:          "20%",
                    intervalUnit:   Timeline.DateTime.MILLISECOND,
                    intervalPixels: 25,
                    overview:       true,
                    convertToBaseUnit: true
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;

            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadXML("/timeline_events/events_list/1", function(xml, url) {
                eventSource.loadXML(xml, url);
            });
        }
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }

    </script>

</head>
 <body  onload="onLoad();" onresize="onResize();">

 <div id="spinner" class="spinner" style="display:none;">
           <%=  image_tag "spinner.gif" %>
 </div>
 <div class="logo">
           <%=  image_tag "grails_logo.jpg" %>
 </div>
<% if flash[:notice] -%>
      <div class="message"><%= flash[:notice] %></div>
 <% end -%>

<%= yield %>

</body>
</html>
